<template>
<div style="padding: 12px">
  <div class="opt-area-02">
    <div class="left-con">
      <Button type="info" @click="exportData()" style="margin-top: 0px;margin-right:10px" :loading="buttonLoading">导出</Button>
    </div>
  </div>
  <Table :columns="columns" :data="tableData" ref="tableRef" :loading="tableLoading"></Table>
</div>
</template>

<script>
import { findSHTJ01List } from '../../../api/z-new-grid'

export default {
  name: 'index',
  data () {
    return {
      tableLoading: false,
      buttonLoading: false,
      columns: [
        {
          title: '核酸轮次',
          key: 'label',
          align: 'center'
        },
        {
          title: '未检测人数',
          key: 'num',
          align: 'center'
        },
        {
          title: '已处置人数',
          key: 'cz',
          align: 'center'
        },
        {
          title: '未处置人数',
          key: 'wcz',
          align: 'center'
        },
        {
          title: '处置率',
          key: 'bfb',
          align: 'center'
        },
        {
          title: '已补检人数',
          key: 'ybj',
          align: 'center'
        },
        {
          title: '未补检人数',
          key: 'wbj',
          align: 'center'
        },
        {
          title: '补检率',
          key: 'bjl',
          align: 'center'
        }
      ],
      tableData: []
    }
  },
  methods: {
    findSHTJ01List () {
      this.tableLoading = true
      findSHTJ01List().then(ret => {
        if (ret.data.errcode === 0) {
          this.tableData = ret.data.data
          this.tableLoading = false
        } else {
          this.$Notice.error({ title: '查询失败！', desc: ret.data.errmsg })
        }
      })
    },
    exportData () {
      this.buttonLoading = true
      findSHTJ01List().then(ret => {
        if (ret.data.errcode === 0) {
          this.$refs.tableRef.exportCsv({
            filename: '未检测核酸人员统计总表',
            columns: this.columns,
            data: ret.data.data
          })
          this.buttonLoading = false
        } else {
          this.$Notice.error({ title: '查询失败！', desc: ret.data.errmsg })
        }
      })
    }
  },
  mounted () {
    this.findSHTJ01List()
  }
}
</script>

<style scoped>
.page_style {
  margin: 20px 5px;
}

.input-frame {
  width: 120px;
  margin-right: 10px;
  float: left;
}

.house-list > .group {
  background: white;
  padding: 10px;
  margin-top: 10px;
}

.house-list > .group > .item {
  border-bottom: 1px solid #f5f5f5;
  padding: 10px 0;
}

.house-list > .group > .item .top {
  display: flex;
  justify-content: space-between;
  margin-bottom: 5px;
}

.house-list > .group > .item .title {
  font-size: 14px;
  color: #333333;
}

.house-list > .group > .item .address {
  font-size: 12px;
  color: gray;
  display: flex;
  align-items: center;
}

.house-list > .group > .item .detail {
  font-size: 12px;
  color: dodgerblue;
}

.opt-area-02 {
  display: flex;
  align-items: center;
  flex-direction: column;
  border: 1px solid #abdcff;
  background-color: #f0faff;
  padding: 8px 16px 8px 16px;
  border-radius: 4px;
  margin-bottom: 10px;
}

.opt-area-02 .right-con {
  width: 100%;
  margin-top: 5px;
  display: flex;
}

.opt-area-02 .left-con {
  font-size: 14px;
  width: 100%;
}

.opt-area-02 .left-con span {
  font-weight: bold;
}

.opt-area-02 .right-con input {
  width: 150px;
  margin-right: 10px;
}

.opt-area-02 .right-con .input-frame {
  width: 200px;
  margin-right: 10px;
}

.table-action-btn {
  margin-bottom: 3px;
}
.container {
  padding: 12px;
}
.container >>> .ivu-btn-small {
  height: 24px;
  padding: 0 5px;
  font-size: 12px;
  border-radius: 3px;
}

.btn-action {
  margin-bottom: 10px;
}

.mp10 {
  margin-right: 10px;
}
.title-style {
  color: red;
}
.mb20 {
  margin-bottom: 20px;
}
.ivu-table-row {
  height: 57px;
}
.demo-spin-icon-load{
  animation: ani-demo-spin 1s linear infinite;
}
@keyframes ani-demo-spin {
  from { transform: rotate(0deg);}
  50%  { transform: rotate(180deg);}
  to   { transform: rotate(360deg);}
}
.red-star {
  font-family: SimSun;
  color: #f00;
  margin-right: 4px;
}
.demo-spin-col{
  height: 100px;
  position: relative;
  /*border: 1px solid #eee;*/
}
.container>>>.ivu-icon-ios-arrow-forward:before{
  color: black;
}
</style>
